<template>
  <div class="detail_container">
    <div class="imgWrap">
      <div class="img_item">
        <img :src="templateDetail.designTemplateImageUrl" />
      </div>
    </div>
    <div class="detail_text">
      <span class="detail_title">{{ templateDetail.templateTitle }}</span>
      <span class="kind_title">{{ templateDetail.kindTitle }}</span>
      <div class="detail_des">
        图片编号为{{ templateDetail.designTemplateId }}。该印刷宣传海报尺寸是{{
          templateDetail.width
        }}
        *{{ templateDetail.height }}。点击“立即使用”。《{{
          templateDetail.templateTitle
        }}》—键生成，在线编辑图片，简单托拉拽，秒出精美印刷宣传海报。
      </div>
    </div>
    <div class="key">
      <div
        class="key_item"
        v-for="(item, index) in keyList"
        :key="index"
        @click="goSearch(item)"
      >
        {{ item }}
      </div>
    </div>
    <!-- 推荐数据-用瀑布流表示 -->
    <Waterfall :list="imgList" />
    <!-- 底部固定定位 -->
    <div class="btnGroup">
      <div class="collecBtn">
        <div class="img">
          <img src="./images/收藏.png" alt="" />
        </div>
      </div>
      <div class="editBtn">立即编辑</div>
    </div>
  </div>
</template>

<script>
import Waterfall from "@/components/Waterfall";
export default {
  name: "Detail",
  props: [],
  data() {
    return {
      templateDetail: {}, //模板详情数据
      keyList: [], //计算出关键字
      recommedList: [], //推荐的数据
    };
  },
  created() {
    this.getDetailData();
  },
  computed: {
    // 计算出符合瀑布流的数据
    imgList() {
      return this.recommedList.filter((item) => {
        item.imgUrl = item.designTemplateImageUrl;
        return true;
      });
    },
  },
  watch: {
    //监听路由，强制刷新
    $route() {
      this.$router.go(0);
    },
  },
  components: {
    Waterfall,
  },
  methods: {
    //获取详情数据
    async getDetailData() {
      const res = await this.$API.get(
        `/api/designtemplate/getDetailCacheFileUrl.do?_dataType=json&_dataClientType=3&client_type=40&id=${this.$route.params.id}`
      );
      if (res.status !== 200) return;
      this.templateDetail = res.data.body.currentTemplate;
      this.keyList = res.data.body.currentTemplate.keywords.split(" ");
      this.recommedList = res.data.body.recommendedTemplates;
    },
    goSearch(item) {
      this.$router.push({ name: "search", query: { key: item } });
    },
  },
};
</script>

<style lang="less" scoped>
.detail_container {
  padding: 0 12px 71.5px;
  .imgWrap {
    height: 453px;
    background: #e3e6e9;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px;
    position: relative;
    .img_item {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
  .detail_text {
    .detail_title {
      display: block;
      font-size: 18px;
      color: #000;
      margin-top: 18px;
      margin-bottom: 12px;
      font-weight: 900;
    }
    .kind_title {
      display: block;
      font-size: 14px;
      margin-bottom: 12px;
      color: rgba(0, 0, 0, 0.6);
    }
    .detail_des {
      display: block;
      font-size: 14px;
      margin-bottom: 12px;
      line-height: 25px;
    }
  }
  .key {
    .key_item {
      background: #f3f4f9;
      border-radius: 15.75px;
      padding: 0 16px;
      height: 31;
      font-size: 12px;
      color: #000;
      line-height: 31px;
      text-align: center;
      display: inline-block;
      margin-right: 8px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      max-width: 128px;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      margin-bottom: 8px;
    }
  }
  .btnGroup {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 71.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    .collecBtn {
      width: 47px;
      height: 47px;
      margin-right: 10px;
      position: relative;
      .img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 23px;
        height: 23px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .editBtn {
      width: 291px;
      height: 47px;
      text-align: center;
      line-height: 47px;
      color: #fff;
      font-size: 15px;
      background-color: #0773fc;
    }
  }
}
</style>